<template>
  <div class="app-container">

    <u-page title="开卡设置">
      <div slot="header">
        <el-button type="primary" @click="updateData">保存</el-button>
      </div>

      <el-form ref="dialogForm" :model="dataForm" :rules="rules" label-width="120px">
        <el-tabs v-model="active">

          <el-tab-pane label="基础设置" name="first">

            <el-form-item label="开卡ID" prop="cardId">
              <el-input v-model="dataForm.cardId" placeholder="开卡ID" style="width: 300px" clearable show-word-limit />
            </el-form-item>

          </el-tab-pane>
        </el-tabs>
      </el-form>
    </u-page>

  </div>
</template>
<script>
export default {
  data() {
    return {
      api: this.$u.api.PluginsCardConfig,
      active: 'first',
      dataForm: {},
      rules: {
      },
      telData: []
    }
  },
  created() {
    this.getLoad()
  },
  methods: {
    // 初始化数据
    getLoad() {
      this.api.fetch().then(res => {
        this.dataForm = res.data
      })
    },
    // 提交编辑数据
    updateData() {
      const self = this
      this.$confirm('确认更改开卡设置', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        self.$refs['dialogForm'].validate((valid) => {
          if (valid) {
            self.api.update(self.dataForm).then(() => {
              self.getLoad()
              self.$u.msg('保存成功')
            })
          }
        })
      }).catch(() => {
      })
    }
  }

}
</script>

<style lang="scss" scoped>

.panel{
  margin-bottom: 20px;
  .panel-body{
    display:flex;
    justify-content:space-between;

    .panel-header{
      display: flex;
      flex-flow: column;
      color: #999;
      font-size: 12px;

      h4{
        font-size: 14px;
        color: #000;
      }
    }

    .panel-switch{
      margin-top: 20px;
    }
  }
}

</style>
